<template>
  <view>
    <view class="binner">
      <view class="main">
        <view class="title">发起我的团购</view>
        <view class="slogn">利用个人资源, 方便大家</view>
        <view class="add" @click="to">
          <view class="btn">+</view>
          <view class="text">发起团购</view>
        </view>
      </view>
    </view>
    <uni-section title="团购列表" type="line" />
    <uni-list>
      <uni-list-item
        v-for="item in datalist"
        :key="item"
        :title="item.title"
        showArrow
        :to="'/pages/contShop/shopdetail?id=' + item._id"
        :note="
          new Date(parseInt(item.start_date))
            .toLocaleString()
            .replace(/:\d{1,2}$/, ' ')
        "
        thumb-size="lg"
        rightText="详情"
      />
    </uni-list>
    <view class="shoplist"> </view>
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
const db = uniCloud.database();

const to = () => {
  uni.navigateTo({
    url: "/pages/contShop/addcontShop",
  });
};

const datalist = ref([]);
const getDataList = async () => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  await db
    .collection("cont-shop")
    .get()
    .then((result) => {
      console.log(result.result.data);
      datalist.value = result.result.data;
      uni.hideLoading();
    })
    .catch((err) => {});
};

onShow(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.binner {
  background: url("../../static/img/contShop/binner.png");
  background-size: 100% 100%;
  width: 100%;
  height: 450rpx;
  position: relative;

  .main {
    position: absolute;
    top: 15%;
    left: 5%;
    width: 90%;
    .title {
      font-size: 45rpx;
    }
    .slogn {
      margin-top: 30rpx;
    }
    .add {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx;
      width: 95%;
      display: flex;
      align-items: center;
      font-size: 35rpx;
      margin-top: 30rpx;
      .btn {
        padding: 10rpx;
        background-color: #00a870;
        width: 55rpx;
        height: 55rpx;
        color: #fff;
        font-weight: bold;
        font-size: 40rpx;
        line-height: 55rpx;
        text-align: center;
        border-radius: 50%;
        margin-right: 40rpx;
      }
    }
  }
}
</style>
